<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no, email=no">
	<meta charset="UTF-8">
	<title _msthash="149916" _msttexthash="656409" style="text-align: left;">Zhongzhigu official website</title>
	<link rel="stylesheet" href="css/public.css">
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			text-decoration: none;
		}

		#banner {
			width: 1920px;
			height: 400px;
			overflow: hidden;
			border: 2px solid #999;
			position: relative;
		}

		#banner img {
			width: 1920px;
			height: 400px;
		}

		#imglist {
			width: 9600px;
			height: 400px;
		}

		#imglist li {
			float: left;
		}

		#icolist {
			position: absolute;
			right: 10px;
			bottom: 10px;
		}

		#icolist li {
			float: left;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: #666;
			color: #fff;
			margin-left: 5px;
			text-align: center;
			line-height: 30px;
			cursor: pointer;
		}

		.prev {
			background: #666;
			height: 40px;
			width: 30px;
			position: absolute;
			left: 5px;
			top: 45%;
			color: #fff;
			line-height: 40px;
			text-align: center;
			cursor: pointer;
		}

		.next {
			background: #666;
			height: 40px;
			width: 30px;
			position: absolute;
			right: 5px;
			top: 45%;
			color: #fff;
			line-height: 40px;
			text-align: center;
			cursor: pointer;
		}

		#soulutionCanverRoot {
			width: 180px;
			display: none;
			justify-self: center;
			flex-direction: column;
			align-self: center;
			position: fixed;
			top: 55px;
			z-index: 100;
		}

		#soulutionCanver {
			/* margin-left: 482px; */
			background-color: #fff;
			width: 100%;
		}

		#soulutionCanver li {
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #000;
		}

		#solutionBtn {}

		/* centerCanverRoot */
		#centerCanverRoot {
			width: 180px;
			display: none;
			justify-self: center;
			flex-direction: column;
			align-self: center;
			position: fixed;
			top: 55px;
			z-index: 100;
		}

		#centerCanver {
			/* margin-left: 482px; */
			background-color: #fff;
			width: 100%;
		}

		#centerCanver li {
			width: 100%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #000;
		}


		#centerBtn {}
	</style>
</head>
<body>
<div style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
	<div style="width: 1920px;height: 60px;display: flex;align-items: center;flex-direction: row; background-color: white;position: fixed;top: 0;z-index: 99;">
		<!-- Logo -->
		<img src="img/logo.png" style="max-width: 40px;max-height: 40px;width: auto;height: auto;margin-left: 15px;" alt="">
		<!-- 标语 -->
		<span style="font-size: 18px; font-weight: 600; margin-left: 18px; color: rgb(254, 86, 83); font-family: Kaiti; text-align: left;" _msthash="525486" _msttexthash="259233">Zhongzhi Valley</span>

		<!-- 分类 -->
		<div style="width: 50%;height: 60px;display: flex;align-items: center;flex-direction: column; background-color: white;margin-left: 200px;">
			<!-- 条目 -->
			<div style="width: 100%;height: 60px;display: flex;align-items: center;flex-direction: row;">
				<a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/home.html" style="color: #4ca41f;width: 16%;height: 100%;">
					<div style="width: 100%;height: 100%;">
						<!-- 首页 -->
						<div style="width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; color: rgb(76, 164, 31); text-align: left;" onclick="window.location.href= 'en-home.html';return false" _msthash="1487174" _msttexthash="43979"> Home</div>
						<!-- 条状 -->
						<div style="width: 100%;height: 5px;background-color: #4ca41f;"></div>
					</div>
				</a>
				<!-- 解决方案 -->
				<div style="width: 18%;height: 100%;" id="solutionRootA">
					<!-- 解决方案 -->
					<!--  onclick="window.location.href= 'solution.html';return false" -->
					<div style="width: 100%;height: 55px;display: flex;align-items: center;justify-content: center;flex-direction: row;">
						<span onclick="window.location.href='en-solution.html'" _msthash="647751" _msttexthash="121602" style="text-align: left;">solution</span>
						<img src="img/arrow-right.png" style="max-width: 12px;max-height: 12px;width: auto;height: auto;margin-left: 3px;" alt="">
					</div>
					<!-- 条状 -->
					<div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
					<!-- 解决方案的下拉菜单 -->
					<div id="soulutionCanverRoot" _msthidden="5">
						<ul id="soulutionCanver" _msthidden="5">
							<li _msthidden="1">
								<a onclick="window.location.href='en-solu1.html'" style="color: #000;" _msthash="579254" _msttexthash="7482371" _msthidden="1">scheme one</a>
							</li>
							<li _msthidden="1">
								<a onclick="window.location.href='en-solu2.html'" style="color: #000;" _msthash="579436" _msttexthash="7498751" _msthidden="1">scheme two</a>
							</li>
							<li _msthidden="1">
								<a onclick="window.location.href='en-solu3.html'" style="color: #000;" _msthash="579618" _msttexthash="7483424" _msthidden="1">scheme three</a>
							</li>
							<li _msthidden="1">
								<a onclick="window.location.href='en-solu4.html'" style="color: #000;" _msthash="579800" _msttexthash="7747610" _msthidden="1">scheme four</a>
							</li>
							<li _msthidden="1">
								<a onclick="window.location.href='en-solu5.html'" style="color: #000;" _msthash="579982" _msttexthash="7499687" _msthidden="1">scheme five</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 产品中心 -->
				<div style="width: 18%;height: 100%;" id="centerBtn">
					<!-- 产品中心 -->
					<div style="width: 100%;height: 55px;display: flex;align-items: center;justify-content: center;color: #;flex-direction: row;">
						<span onclick="window.location.href= 'en-products.html';return false" _msthash="477308" _msttexthash="117832" style="text-align: left;">Products</span>
						<img src="img/arrow-right.png" style="max-width: 12px;max-height: 12px;width: auto;height: auto;margin-left: 3px;" alt="">
					</div>
					<!-- 条状 -->
					<div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
					<!-- 产品中心的下拉菜单 -->
					<div id="centerCanverRoot" _msthidden="4">
						<ul id="centerCanver" _msthidden="4">
							<li _msthidden="1">
								<a onclick="window.location.href='en-pro1.html'" style="color: #000;" _msthash="448136" _msttexthash="14000623" _msthidden="1">LED line plate</a>
							</li>
							<li _msthidden="1">
								<a onclick="window.location.href='en-pro2.html'" style="color: #000;" _msthash="448318" _msttexthash="37073023" _msthidden="1">LCD display</a>
							</li>
							<li _msthidden="1">
								<a onclick="window.location.href='en-pro3.html'" style="color: #000;" _msthash="448500" _msttexthash="11237265" _msthidden="1">GPS Station Announcer & Control Box</a>
							</li>
							<li _msthidden="1">
								<a onclick="window.location.href='en-pro4.html'" style="color: #000;" _msthash="448682" _msttexthash="8156759" _msthidden="1">LED Screen Accessories(SKD)</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 新闻资讯 -->
				<a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/news.html" style="color: #000;width: 16%;height: 100%;">
					<div style="width: 100%;height: 100%;">
						<!-- 新闻资讯 -->
						<div style="width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; color: rgb(0, 0, 0); text-align: left;" onclick="window.location.href= 'en-news.html';return false" _msthash="1488812" _msttexthash="46475"> News</div>
						<!-- 条状 -->
						<div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
					</div>
				</a>
				<!-- 关于我们 -->
				<a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/about.html" style="color: #000;width: 16%;height: 100%;">
					<div style="width: 100%;height: 100%;">
						<!-- 关于我们 -->
						<div style="width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; color: rgb(0, 0, 0); text-align: left;" onclick="window.location.href= 'en-about.html';return false" _msthash="1489358" _msttexthash="98579"> About us</div>
						<!-- 条状 -->
						<div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
					</div>
				</a>
				<!-- 联系我们 -->
				<a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/conact.html" style="color: #000;width: 16%;height: 100%;">
					<div style="width: 100%;height: 100%;">
						<!-- 联系我们 -->
						<div style="width: 100%; height: 55px; display: flex; align-items: center; justify-content: center; color: rgb(0, 0, 0); text-align: left;" onclick="window.location.href= 'en-conact.html';return false" _msthash="1535924" _msttexthash="138229"> Contact us</div>
						<!-- 条状 -->
						<div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
					</div>
				</a>
			</div>
		</div>


		<!-- 搜索框 -->
		<div style="width: 20%;height: 32px;border: 1px solid #4ca41f;border-radius: 20px;margin-left: 175px;display: flex;align-items: center;flex-direction: row;">
			<!-- 搜索框图标 -->
			<img src="img/search-gray.png" style="max-width: 24px;max-height: 24px;width: auto;height: auto;margin-left: 10px;" alt="">
			<!-- 输入框 -->
			<input type="text" style="width: 80%; height: 70%; border: none; text-align: left;" placeholder="Enter the one you are looking for" _mstplaceholder="757952">
		</div>
		<div>&nbsp;&nbsp;&nbsp;</div>
		<div>
			<img src="img/中英文切换.svg" alt="" onclick="window.location.href= 'solution.html';return false">
		</div>
	</div>

	<div style="width: 1920px;height: 60px;"></div>




</div>

<script>
	// 解决方案鼠标悬停下拉框
	var centerBtn = document.getElementById('centerBtn');
	var centerCanver = document.getElementById('centerCanver');
	var centerCanverRoot = document.getElementById('centerCanverRoot')

	// 鼠标移入，出现下拉菜单
	centerBtn.onmouseenter = function() {
		console.log("鼠标移入");
		centerCanverRoot.style.display = 'flex';
	}
	// 鼠标移除，菜单消失
	centerBtn.onmouseleave = function() {
		centerCanverRoot.style.display = 'none';
	}

	// 鼠标移入下拉框
	centerCanver.onmouseenter = function() {
		centerCanverRoot.style.display = 'flex';
	}
	centerCanver.onmouseleave = function() {
		centerCanverRoot.style.display = 'none';
	}
	// 解决方案鼠标悬停下拉框
	var solutionBtn = document.getElementById('solutionRootA');
	var solutionCanver = document.getElementById('solutionCanver');
	var soulutionCanverRoot = document.getElementById('soulutionCanverRoot')

	// 鼠标移入，出现下拉菜单
	solutionBtn.onmouseenter = function() {
		console.log("鼠标移入");
		soulutionCanverRoot.style.display = 'flex';
	}
	// 鼠标移除，菜单消失
	solutionBtn.onmouseleave = function() {
		soulutionCanverRoot.style.display = 'none';
	}

	// 鼠标移入下拉框
	soulutionCanver.onmouseenter = function() {
		soulutionCanverRoot.style.display = 'flex';
	}
	soulutionCanver.onmouseleave = function() {
		soulutionCanverRoot.style.display = 'none';
	}


	var esico = document.getElementById('icolist').getElementsByTagName('li');
	var eicolist = document.querySelector('#icolist');
	var eimglist = document.querySelector('#imglist');
	var etest = document.querySelector('#test');
	var eprev = document.querySelector('.prev');
	var enext = document.querySelector('.next');
	var left = 0;
	var timer;
	esico[2].style.backgroundColor = '#4ca41f';
	run();

	function run() {
		if (left <= -7680) {
			left = 0;
		}
		var m = Math.floor(-left / 1920);
		imglist.style.marginLeft = left + 'px';
		var n = (left % 1920 == 0) ? n = 1200 : n = 6;
		left -= 10;
		icochange(m);
		timer = setTimeout(run, n);
	}

	function icochange(m) {
		for (let index = 0; index < esico.length; index++) {
			esico[index].style.backgroundColor = '';
		}
		if (m < esico.length) {
			esico[m].style.backgroundColor = '#4ca41f';
		}
	}

	function imgchange(n) {
		let lt = -(n * 800)
		imglist.style.marginLeft = lt + 'px';
		left = lt;
	}
	eprev.onclick = function() {
		let prevgo = Math.floor(-left / 800) - 1;
		if (prevgo == -1) {
			prevgo = 3;
		}
		imgchange(prevgo);
		icochange(prevgo);
	}
	enext.onclick = function() {
		let nextgo = Math.floor(-left / 800) + 1;
		if (nextgo == 4) {
			nextgo = 0;
		}
		imgchange(nextgo);
		icochange(nextgo);
	}
	eicolist.onclick = function() {
		var tg = event.target;
		let ico = tg.innerHTML - 1;
		imgchange(ico);
		icochange(ico);
	}
	eimglist.onmouseover = function() {
		clearTimeout(timer);
	}
	eimglist.onmouseout = function() {
		run();
	}
</script>

</body>

</html>
